<template>
    <PageWrapper>
        <n-card :bordered="false" class="mb-3 proCard">
        <n-space align="center">
          <n-input-group style="width: 1500px">
            <div style="margin-left: 10px !important;display: flex;align-items: center;">
                <n-input
                style="width: 100%;margin-left: 20px;"
                v-model:value="params.bussiness_name"
                clearable
                placeholder="请输入商户名称"
                @keyup.enter="reloadTable"
                />
                <div style="margin-left: 20px !important;display: flex;align-items: center;">
                  <n-select v-model:value="params.attr" placeholder="请选择会员卡类型" style="width: 200px;" :options="optionspt" clearable />
                </div>
            </div>
            <div style="margin-left: 20px !important;display: flex;align-items: center;">
              <n-date-picker v-model:value="range" type="daterange"  @update:value="onChange4" clearable />
            </div>
            <n-button type="primary" style="margin-left: 40px !important;" @click="reloadTable">
              <template #icon>
                <n-icon>
                  <SearchOutlined />
                </n-icon>
              </template>
              查询
            </n-button>
          </n-input-group>
        </n-space>
      </n-card>
      <n-card :bordered="false" class="proCard">
        <BasicTable
          :columns="columns"
          :request="loadDataTable"
          :row-key="(row) => row.id"
          ref="basicTableRef"
          virtual-scroll
        ></BasicTable>
      </n-card>
    </PageWrapper>
  </template>
  
  <script lang="ts" setup>
    import { reactive, ref, onMounted } from 'vue';
    import { BasicTable } from '@/components/Table';
    import { SearchOutlined } from '@vicons/antd';
    import { columns } from './columns';
    import { record } from '@/api/card/index';

    const basicTableRef = ref();
    const tableData = ref();
    const range = ref<[number, number]>();
    const params = reactive({
        bussiness_name: '',
        attr: null,
        sdate: '',
        edate: '',
    });

    const optionspt = ref([
      {
        label: "月卡",
        value: 1,
      }, {
        label: '季卡',
        value: 2
      }, {
        label: '年卡',
        value: 3
      }, {
        label: '两年卡',
        value: 4
      }, {
        label: '三年卡',
        value: 5
      }
    ])
  
    const loadDataTable = async (res) => {
      const result = await record({ ...params, ...res });
      tableData.value = result.list;
      return result;
    };

    //加载表格
    function reloadTable() {
      basicTableRef.value.reload();
    }

    function onChange4(v: number){
      if(v != null){
        params.sdate = v[0];
        params.edate = v[1];
      }else{
        params.sdate = '';
        params.edate = '';
      }
    }
  
    onMounted(async () => {
      
    });
  </script>
  
  <style lang="less" scoped></style>
  